let data = [
    {"count": 4000, "price": 1200, "unitPrice": "0.3000"},
    {"count": 8000, "price": 2000,"unitPrice": "0.2500" },
    {"count": 40000, "price": 8000, "unitPrice": "0.2000" }
   ]
   let spanHtml=""
   data.forEach(function(v){
    spanHtml+=`
        <span price="${v.price}" unitPrice="${v.unitPrice}" >${v.count}次</span>
    `
})
let btns=document.querySelector(".beijing .btns")
// btns里面有原有样式 所以是+=
btns.innerHTML+=spanHtml
let spanbtn=document.querySelectorAll(".beijing .btns span")
spanbtn.forEach(function(v){
  v.addEventListener("click",function(){
let money=document.querySelector(".use .money")
let money2=document.querySelector(".use .money2")
money.innerHTML=v.getAttribute("price")
money2.innerHTML=v.getAttribute("unitPrice")
  })
})
// 
//点击a时切换对应的div
// 先获取页面的a标签
let abtns=document.querySelectorAll(".div-a a")
// 获取页面div
let divs=document.querySelectorAll("main .div-main")
// 遍历a 绑定点击事件
abtns.forEach(function(v,i){
v.addEventListener("click",function(){
for(let x=0;x<divs.length;x++){
divs[x].classList.remove("appear")
// console.log(divs[x]);
}
divs[i].classList.add("appear")
console.log(divs[i]);
})
})











